<script setup lang="ts">
import ItemWrap from "@/components/item-wrap";

import LeftCenter from "./shujutongji.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import Xunjianshu from "./xunjianshu.vue";
import Yichangshu from "./yichangshu.vue";
import Anquanjiaoyuzongshu from "./anquanjiaoyuzongshu.vue";
import Gongsirenyuan from "./gongsirenyuan.vue";
import Dianwei from "./dianwei.vue";

import RightTop from "./right-top.vue";

import RightBottom from "./right-bottom.vue";
import { useRoute } from 'vue-router';
const route = useRoute();
const companyid = JSON.parse(route.query.id);

</script>

<template>

  <div class="index-box">
  
    
    <div class="contetn_left">
   
      
      <ItemWrap class="contetn_center-bottom contetn_lr-item" title="数据统计">
        <LeftCenter :data = "companyid"/>
      </ItemWrap>
      <ItemWrap class="contetn_center-bottom contetn_lr-item" title="巡检数">
        <Xunjianshu :data = "companyid" />
      </ItemWrap>
      <ItemWrap class="contetn_center-bottom contetn_lr-item" title="异常数">
        <Yichangshu :data = "companyid" />
      </ItemWrap>
      
    </div>
    
    <div class="contetn_right">
      <ItemWrap class="contetn_right-bottom contetn_lr-item" title="安全教育总数">
        <Anquanjiaoyuzongshu :data = "companyid"/>
      </ItemWrap>
      <ItemWrap class="contetn_right-bottom contetn_lr-item" title="公司人员">
        <Gongsirenyuan  :data = "companyid"/>
      </ItemWrap>
      <ItemWrap class="contetn_right-bottom contetn_lr-item" title="点位">
        <Dianwei   :data = "companyid"/>
      </ItemWrap>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index-box {
  width: 100%;
  display: flex;
  min-height: calc(100% - 64px);
  justify-content: space-between;
}
//左边 右边 结构一样
.contetn_left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 60%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.contetn_right {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  width: 40%;
  box-sizing: border-box;
  flex-shrink: 0;
}
.contetn_center {
  flex: 1;
  margin: 0 54px;
  display: flex;
  flex-direction: row; /* 从左到右 */
  flex-direction: column;
  //justify-content: space-around;
  .contetn_center-bottom {
    height: 315px;
  }
}

.contetn_lr-item {
  height: 310px;
}
</style>
